<template>
  <div class="max">
    <h4>营销机会添加</h4>
    <div class="name">
      <span>客户名称</span>
      <el-input placeholder="请输入客户名称" v-model="customer_name" clearable style="width: 400px"></el-input>
    </div>
    <div class="name">
      <span>机会来源</span>
      <el-input placeholder="请输入机会来源" v-model="chance_source" clearable style="width: 400px"></el-input>
    </div>
    <div class="name">
      <span>联系人</span>
      <el-input placeholder="请输入联系人" v-model="link_man" clearable style="width: 400px"></el-input>
    </div>
    <div class="name">
      <span>联系电话</span>
      <el-input placeholder="请输入联系电话" v-model="link_phone" clearable style="width: 400px"></el-input>
    </div>
    <div class="name">
      <span>概要</span>
      <el-input placeholder="请输入概要" v-model="overview" clearable style="width: 400px"></el-input>
    </div>
    <div class="name">
      <span>成功几率(%)</span>
      <el-input placeholder="请输入成功几率" v-model="cgjl" clearable style="width: 400px"></el-input>
    </div>
    <div class="describe">
      <span>机会描述</span>
      <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 4}" placeholder="请输入机会描述信息" v-model="description" style="width: 400px">
      </el-input>
    </div>
    <div class="name">
      <span>指派给</span>
      <el-select v-model="value" placeholder="请选择" style="width: 400px">
        <el-option v-for="item in assign_man"  :label="item.label" :value="item.value"></el-option>
      </el-select>
    </div>
    <!--确定取消按钮-->
    <div class="confirm">
      <el-button type="success" style="width: 82px;height: 44px">确定</el-button>
      <el-button type="primary" style="width: 82px;height: 44px">取消</el-button>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
export default {
  name: "MarAdd",
  setup() {
    return {
      customer_name: ref(''),//客户名称
      chance_source: ref(''),//机会来源
      link_man: ref(''),//联系人
      link_phone: ref(''),//联系电话
      overview: ref(''),//概要
      cgjl: ref(''),//成功几率(%)
      description: ref(''),//机会描述
      //分配人
      assign_man: [
        {
          value: '选项1',
          label: '张三',
        },
        {
          value: '选项2',
          label: '李四',
        },
      ],
      value: ref(''),
    }
  }
}
</script>

<style scoped>
  .el-select-dropdown__item{
    width: 60%;
  }
  .max{
    width: 750px;
    height: 560px;
    border: 0px solid black;
    margin-top: 15px;
    background-color: #F2F2F2;
  }
  .name{
    width: 536px;
    height: 38px;
    border: 0px solid black;
    margin-top: 15px;
    text-align: right;
  }
  .describe{
    width: 536px;
    height: 75px;
    border: 0px solid black;
    margin-top: 15px;
    text-align: right;
    line-height: 4;
  }
  .confirm{
    width: 466px;
    height: 44px;
    border: 0px solid black;
    margin-left: 137px;
    margin-top: 15px;
  }
  .max div span{
    padding: 0 15px;
  }
</style>
